<template>
  <view class="detail-bg">
    <!-- 顶部类型标签 -->
    <view class="type-tag tag-green"  v-if="detailInfo.dictValue==1||detailInfo.dictValue==2  " >供应</view>
    <view class="type-tag tag-orange" v-if="detailInfo.dictValue==3||detailInfo.dictValue==4  " >需求</view>
    <!-- 标题 -->
    <view class="supply-title">
      {{detailInfo.title}}
    </view>
    <!-- 发布时间与分类 -->
    <view class="meta-row">
      <view>发布时间：{{detailInfo.createTime}}</view>
      <view class="meta-dot">|</view>
      <view>分类：{{getDemandsLabel(detailInfo.type)}}</view>
    </view>
    <!-- 企业信息卡 -->
    <view class="company-card">
      <image class="company-avatar" :src="imgUrl+detailInfo.logoUrl" />
      <view class="company-info">
        <view class="company-name">{{detailInfo.enterpriseName}}</view>
        <view class="company-desc">{{getEmLabel(detailInfo.memberLevelId)}} | 信誉良好</view>
      </view>
      <button class="company-btn" @click="toCompany">查看企业</button>
    </view>
    <!-- 详细说明 -->
    <view class="section">
      <view class="section-title">详细说明</view>
      <view class="section-content">
        本公司现有3台全新高精度数控机床待售。
      </view>
    </view>
    <!-- 联系方式 -->
    <view class="section">
      <view class="section-title">联系方式</view>
      <view class="contact-row">
        <u-icon name="account-fill" color="#3a7afe" size="28" />
        <view class="contact-label">联系人：</view>
        <view class="contact-value">{{detailInfo.contactPerson || '未知' }}</view>
      </view>
      <view class="contact-row">
        <u-icon name="phone-fill" color="#3a7afe" size="28" />
        <view class="contact-label">联系电话：</view>
        <view class="contact-value"><text user-select="true" >{{ detailInfo.contactPhone || '未知' }}</text></view>
      </view>
      <view class="contact-row">
        <u-icon name="email-fill" color="#3a7afe" size="28" />
        <view class="contact-label">邮箱：</view>
        <view class="contact-value"><text user-select="true" >{{ detailInfo.email || '未知' }}</text></view>
      </view>
      <view class="contact-row">
        <u-icon name="map-fill" color="#3a7afe" size="28" />
        <view class="contact-label">地址：</view>
        <view class="contact-value"><text user-select="true" >{{ detailInfo.address || '未知' }}</text></view>
      </view>
    </view>
    <!-- 固定底部按钮 -->
    <view class="fixed-footer">
      <button class="contact-btn" @click="onContact">
        <u-icon name="phone-fill" color="#fff" size="32" style="margin-right:12rpx;" />
        联系供应商
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {imgUrl} from '@/config/index.js'
import {getSupplyInfo,getDict} from '@/api/index.js'
import {onLoad} from '@dcloudio/uni-app'
onLoad((options)=>{
  console.log(options);
  getDict('demand_type').then(res => {
    demandsType.value = res.data
  })
  getDict('em_type').then(res => {
    emType.value = res.data
  })
  getSupplyInfo({id: options.id}).then(res=>{
    console.log(res);
    detailInfo.value=res.data
  })

})
let emType = ref([])
let detailInfo = ref([])
let demandsType = ref([])
const getEmLabel=(type)=>{ 
  let index=emType.value.findIndex(i=>i.dictValue==type)
  return index>-1?emType.value[index].dictLabel:''
}
const getDemandsLabel=(type)=>{ 
  let index=demandsType.value.findIndex(i=>i.dictValue==type)
  return index>-1?demandsType.value[index].dictLabel:''
}
const toCompany = () => {
  uni.navigateTo({ url: '/pages/mine/enterprise_detail?id='+detailInfo.value.enterpriseId })
}

const onContact = () => {
  if(!detailInfo.value.contactPhone) {
    uni.showToast({ title: '暂无联系方式', icon: 'none' })
    return
  }
  uni.makePhoneCall({ phoneNumber:detailInfo.value.contactPhone })
}
</script>

<style scoped>
.detail-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
  box-sizing: border-box;
  overflow: hidden;
}
.type-tag {
  display: inline-block;
  margin: 32rpx 0 0 32rpx;
  font-size: 24rpx;
  padding: 4rpx 18rpx;
  border-radius: 12rpx;
  
}
.tag-green {
  background: #e6f9ea;
  color: #19be6b;
}
.tag-orange {
  background: #fff3e6;
  color: #faad14;
}
.supply-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  margin: 18rpx 32rpx 0 32rpx;
  line-height: 1.4;
}
.meta-row {
  display: flex;
  align-items: center;
  color: #888;
  font-size: 26rpx;
  margin: 12rpx 32rpx 0 32rpx;
  gap: 12rpx;
}
.meta-dot {
  margin: 0 8rpx;
}
.company-card {
  background: #fff;
  border-radius: 18rpx;
  margin: 24rpx 24rpx 0 24rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  gap: 18rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
}
.company-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #f0f0f0;
}
.company-info {
  flex: 1;
}
.company-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #222;
}
.company-desc {
  font-size: 24rpx;
  color: #888;
  margin-top: 4rpx;
}
.company-btn {
  background: #f4f8ff;
  color: #3a7afe;
  border: none;
  /* border-radius: 12rpx; */
  font-size: 26rpx;
  /* padding: 12rpx 28rpx; */
}
.section {
  background: #fff;
  border-radius: 18rpx;
  margin: 24rpx 24rpx 0 24rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 12rpx;
}
.section-content {
  font-size: 28rpx;
  color: #444;
  line-height: 1.7;
}
.contact-row {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  margin-bottom: 14rpx;
  color: #444;
  gap: 10rpx;
}
.contact-label {
  color: #888;
  margin-left: 8rpx;
}
.contact-value {
  color: #222;
  margin-left: 4rpx;
}
.fixed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -4rpx 24rpx 0 rgba(64,158,255,0.04);
  padding: 24rpx 24rpx 32rpx 24rpx;
  z-index: 99;
}
.contact-btn {
  width: 100%;
  background: #2156f3;
  color: #fff;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  /* padding: 28rpx 0; */
  font-weight: bold;
  letter-spacing: 2rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>